import { Button, Divider, Menu, type MenuProps, theme } from 'antd';
import { useEffect } from 'react';
import { useNavigate } from 'react-router';
import AdminCard from '../components/Admin/AdminCard.tsx';
import AdminCustomer from '../components/Admin/AdminCustomer.tsx';
import AdminHome from '../components/Admin/AdminHome.tsx';
import AdminTrade from '../components/Admin/AdminTrade.tsx';
import MainPageLayout from '../components/MainPageLayout.tsx';
import { useAdminState } from '../stores/AdminStore.ts';

const menu_items: MenuProps['items'] = [
  {
    key: 'home',
    label: '首页',
  },
  {
    key: 'customerManagement',
    label: '客户管理',
  },
  {
    key: 'cardManagement',
    label: '卡管理',
  },
  {
    key: 'tradeManagement',
    label: '交易管理',
  },
];

function Admin() {
  const {
    token: { colorBgContainer },
  } = theme.useToken();
  const navigate = useNavigate();
  const { isAdmin, setIsAdmin, adminContentKey, setAdminContentKey } =
    useAdminState();
  useEffect(() => {
    if (!isAdmin) {
      navigate('/login');
    }
  }, [isAdmin, navigate]);
  const handleMenuClick: MenuProps['onClick'] = (e) => {
    setAdminContentKey(e.key);
  };
  // @ts-ignore
  const handleLogout = (_) => {
    setIsAdmin(false);
    setAdminContentKey('home');
  };
  function RenderContent() {
    switch (adminContentKey) {
      case 'home':
        return <AdminHome />;
      case 'customerManagement':
        return <AdminCustomer />;
      case 'cardManagement':
        return <AdminCard />;
      case 'tradeManagement':
        return <AdminTrade />;
    }
  }

  return (
    <MainPageLayout
      title="客户中心 - SomeBank"
      description="SomeBank客户中心"
      headerContent={
        <>
          <div className="text-2xl mr-10" style={{ color: colorBgContainer }}>
            SomeBank - 管理员
          </div>
          <Menu
            theme="dark"
            mode="horizontal"
            defaultSelectedKeys={[adminContentKey]}
            items={menu_items}
            onClick={handleMenuClick}
            style={{ flex: 1, minWidth: 0 }}
          />
          <p className="justify-end text-white">您现在是SB管理员</p>
          <Divider type="vertical" />
          <Button type="link" onClick={handleLogout}>
            注销
          </Button>
        </>
      }
    >
      <RenderContent />
    </MainPageLayout>
  );
}

export default Admin;
